<template>
    <div style="background: #fff;height: 100%;">
        <van-nav-bar title="应用管理" right-text="保存" @click-left="onClickLeft" @click-right="onClickRight" />
        <div class="applyBox">
            <div class="left">
                <van-sidebar v-model="activeKey" @change="onChange" style="width: 100%;">
                    <van-sidebar-item title="首页应用" />
                    <van-sidebar-item v-for="item in menuList" :key="item.menuId" :title="item.menuName" />
                </van-sidebar>
            </div>
            <div class="right">
                <h5>首页应用</h5>
                <ul>
                    <li v-for="(item, index) in homeApplyList" :key="item.menuId" :text="item.menuName">
                        <img :src="'images/menuIcon/' + item.menuPicture">
                        <p>{{item.menuName}}</p>
                        <div class="icon">
                            <img src="images/home/reduce.svg" @click="handleReduce(index)">
                        </div>
                    </li>
                    <li v-for="item in emptyNumber" :key="item" class="emptyBlock">
                        <van-icon name="plus" />
                    </li>
                </ul>
                <h5>{{applyTitle}}</h5>
                <ul>
                    <li v-for="item in applyList" :key="item.menuId" :text="item.menuName">
                        <img :src="'images/menuIcon/' + item.menuPicture">
                        <p>{{item.menuName}}</p>
                        <div class="icon">
                            <img v-if="homeApplyId.indexOf(item.menuId) === -1" src="images/home/add.svg" @click="handleAdd(item)">
                            <img v-else src="images/home/checked.svg">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <moveBtn @on-click="onClickLeft" />
        <fullLoading v-if="loading"></fullLoading>
    </div>
</template>

<script>
    import { queryStaffMenu, queryAppHomeMenu, addAppHomeMenu } from '@/api/platframe/mainFrame/home';
    export default {
        data () {
            return {
                loading: false,
                searchKeyword: '', // 搜索关键字
                activeKey: 0,
                menuList: [],
                applyTitle: '',
                applyList: [],
                homeApplyList: []
            }
        },
        computed: {
            emptyNumber: function () {
                return 9 - this.homeApplyList.length;
            },
            homeApplyId: function () {
                let arr = [];
                this.homeApplyList.forEach(item => {
                    arr.push(item.menuId);
                })
                return arr;
            }
        },
        mounted () {
            this.queryAppHomeMenuData();
            this.queryStaffMenuData();
        },
        methods: {
            // 查询首页应用
            queryAppHomeMenuData () {
                this.homeApplyList = [];
                this.loading = true;
                queryAppHomeMenu().then(res => {
                    this.loading = false;
                    if (res.code === 1000 && res.data && res.data.length) {
                        this.homeApplyList = res.data;
                    }
                }).catch(() => {
                    this.loading = false;
                })
            },
            // 查询用户应用
            queryStaffMenuData () {
                if (sessionStorage.getItem('menuList')) {
                    this.menuList = JSON.parse(sessionStorage.getItem('menuList'));
                } else {
                    queryStaffMenu().then(res => {
                        if (res.code === 1000 && res.data && res.data.length) {
                            this.menuList = res.data;
                        }
                    })
                }
            },
            // 点击侧边菜单标签
            onChange (index) {
                if (index === 0) {
                    this.applyTitle = '';
                    this.applyList = [];
                    return;
                }
                this.applyTitle = this.menuList[index - 1].menuName;
                this.applyList = this.menuList[index - 1].children;
            },
            // 添加到首页应用
            handleAdd (item) {
                if (this.homeApplyList.length >= 9) {
                    this.$Notify({ type: 'warning', message: '超出最大限制，请先移除再添加！' });
                } else {
                    this.homeApplyList.push(item);
                }
            },
            // 从首页应用移除
            handleReduce (index) {
                this.homeApplyList.splice(index, 1);
            },
            // 返回首页
            onClickLeft () {
                this.$router.push({
                    path: '/mainFrame/home'
                });
            },
            // 保存
            onClickRight () {
                let params = [];
                let staffId = "";
                if (sessionStorage.getItem("userInfo")) {
                    staffId = JSON.parse(sessionStorage.getItem("userInfo")).user;
                }
                this.homeApplyList.forEach((item, index) => {
                    params.push({
                        menuId: item.menuId,
                        sort: (index + 1),
                        staffId
                    })
                })
                this.loading = true;
                addAppHomeMenu(params).then(res => {
                    this.loading = false;
                    if (res.code === 1000) {
                        this.$Notify({ type: 'success', message: '保存成功！' });
                        this.queryAppHomeMenuData();
                    }
                }).catch(() => {
                    this.loading = false;
                })
            }
        }
    }
</script>

<style scoped lang="less">
    /deep/.van-nav-bar__content {
        background: #4eb3e9;
        .van-nav-bar__title,
        .van-icon,
        .van-nav-bar__text {
            color: #fff;
        }
    }
    .applyBox {
        display: flex;
        height: calc(100% - 47px);
        .left {
            width: 88px;
            overflow: auto;
            background: #f4f7fa;
            /deep/.van-sidebar-item--select::before {
                background-color: #757075;
                height: 100%;
            }
        }
        .right {
            flex: 1;
            overflow: auto;
            h5 {
                color: #283f65;
                font-size: 16px;
                line-height: 22px;
                padding-left: 12px;
                margin: 16px 0;
            }
            ul {
                display: flex;
                flex-wrap: wrap;
                padding: 0 3.5%;
                box-sizing: border-box;
                li {
                    width: 31%;
                    position: relative;
                    background: #f4f7fa;
                    margin-bottom: 10px;
                    margin-right: 3.5%;
                    text-align: center;
                    padding: 20px 8px 0;
                    box-sizing: border-box;
                    height: 91px;
                    img {
                        width: 27px;
                        height: 26px;
                        margin-bottom: 6px;
                    }
                    p {
                        color: #4d6181;
                        font-size: 12px;
                        line-height: 15px;
                        min-height: 35px;
                        text-align: center;
                    }
                    .icon {
                        position: absolute;
                        right: 5px;
                        top: 5px;
                        img {
                            width: 14px;
                            height: 14px;
                        }
                    }
                }
                .emptyBlock {
                    border: 1px dashed #ccc;
                    .van-icon {
                        font-size: 24px;
                        line-height: 50px;
                        color: #aaa;
                    }
                }
            }
            ul li:nth-of-type(3n) {
                margin-right: 0;
            }
        }
    }
</style>
